<script setup lang='ts'>
import ChannelNav from '@/components/ChannelNav.vue';
import ArticleList from '@/components/ArticleList.vue';
import { useChannel } from '@/hooks';

const { channelList,activeId,updateActiveId } = useChannel() 
</script>

<template>
    <!-- 频道 -->
    <ChannelNav :channels="channelList" :activeId="activeId" @updateActiveId="updateActiveId"></ChannelNav>
    <!-- 列表 -->
    <ArticleList :activeId="activeId"></ArticleList>
    <!-- 二级路由容器 -->
     <div class="fix">
        <router-view></router-view>
     </div>
</template>

<style scoped>
.fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
</style>